<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
	<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
	<style type="text/css">
		* {
		    margin: 0;
		    padding: 0;
		    box-sizing: border-box;
		}
		header {
		    font-size: 13px;
		    width: 100%;
		    background-color: #e3e4e5;
		}
		.icon-dizhi {
		    color: red;
		    margin-right: 5px;
		}
		.header {
		    display: flex;
		    justify-content: space-between;
		    line-height: 30px;
		    width: 1190px;
		    height: 30px;
		    color: #999;
		    margin: 0 auto;
		}
		.header-right {
		    display: flex;
		    list-style: none;
		}
		.header-right li {
		    position: relative;
		}
		.header-right li a:hover {
		    color: red;
		}
		.header-right>li+li::before {
		    display: inline-block;
		    content: "";
		    width: 1px;
		    height: 10px;
		    margin: 0 10px;
		    border-left: 1px solid #999;
		}
		.header-right>li:nth-child(3)::before {
		    display: inline-block;
		    content: "";
		    width: 1px;
		    height: 10px;
		    margin-left: 10px;
		    margin-right: 0;
		    border-left: 1px solid #999;
		}
		.icon-xiala {
		    margin-left: 3px;
		    font-size: 8px;
		}
		.red {
		    color: red;
		}
		a {
		    text-decoration: none;
		    color: #999;
		}
		.menu {
		    border: 1px solid #e3e4e5;
		    box-sizing: border-box;
		    padding: 6px 4px;
		    z-index: 999;
		}
		.menu-item {
		    display: none;
		    left: 16px;
		    top: 29px;
		    position: absolute;
		    width: 255px;
		    height: 170px;
		    border: 1px solid #e3e4e5;
		}
		.menubar:hover .menu {
		    width: 62px;
		    height: 30px;
		    background-color: #fff;
		    border: 1px solid #e3e4e5;
		    z-index: 999;
		    border-bottom: 1px solid #fff;
		}
		.header-right .menubar:hover .menu-item {
		    display: block;
		}
		.header .menu-item .menu-item1 {
		    list-style: none;
		    display: flex;
		    height: 95px;
		    margin-top: 12px;
		    padding-left: 10px;
		    flex-wrap: wrap;
		    flex-direction: column;
		    border-bottom: 1px solid #ccc;
		}
		.header .menu-item .menu-item2 {
		    list-style: none;
		    display: flex;
		    height: 60px;
		    padding-left: 10px;
		    flex-wrap: wrap;
		    flex-direction: column;
		}
	</style>
</head>
<body>
	<header>
		<div class="header">
			<div class="header-left">
				<span class="iconfont icon-dizhi"></span>江苏
			</div>
			<ul class="header-right">
				<li><a href="#">你好，请登入</a> <a class="red" href="#">免费注册</a></li>
				<li><a href="#">我的订单</a></li>
				<li class="menubar">
					<a class="menu" href="#">我的京东</a><span class="iconfont icon-xiala"></span>
					<div class="menu-item">
						<ul class="menu-item1">
							<li>待处理订单</li>
							<li>返修退换货</li>
							<li>减价商品</li>
							<li>我的问答</li>
							<li>我的关注</li>
						</ul>
						<ul class="menu-item2">
							<li>我的京豆</li>
							<li>我的优惠卷</li>
							<li>我的白条</li>
							<li>我的理财</li>
						</ul>
					</div>
				</li>
				<li><a href="#">京东会员</a></li>
				<li><a class="red" href="#">企业采购</a><span class="iconfont icon-xiala"></span></li>
				<li><a href="#">客户服务</a><span class="iconfont icon-xiala"></span></li>
				<li><a href="#">网站导航</a><span class="iconfont icon-xiala"></span></li>
				<li><a href="#">手机京东</a></li>
			</ul>
		</div>
	</header>
</body>
</html>